<template>
  <el-card>
    <div v-if="username && isSend">
      <h1>用户名：{{ username }}</h1>
      <div class="chat-container">
        <div v-for="(msg, index) in messageList" :key="index">
          <div v-if="msg.type === 'welcome'" class="welcome">
            <p class="welcome-text">欢迎 {{ msg.content }} 加入聊天室！</p>
          </div>
          <div v-else-if="msg.type === 'my'" class="my">
            <p class="my-title">我 {{ msg.time }}</p>
            <p class="my-content">{{ msg.content }}</p>
          </div>
          <div v-else class="other">
            <p class="my-title">{{ msg.username }} {{ msg.time }}</p>
            <p class="my-content">{{ msg.content }}</p>
          </div>
        </div>
      </div>
      <el-form>
        <el-form-item>
          <el-input type="textarea" :rows="3" v-model="content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendMsg">发送消息</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-form v-else>
      <el-form-item label="用户名">
        <el-input
          v-model="username"
          placeholder="请输入用户名登录聊天室"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sendUsername">登录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'XChat',
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { io } from 'socket.io-client'
import dayjs from 'dayjs'

interface Message {
  type: string
  content: string
  username?: string
  time?: string
}

// 用户名
const username = ref('')
const isSend = ref(false)
// 所有消息列表
const messageList = ref<Message[]>([])
// 收集的消息内容
const content = ref('')

// 连接服务器聊天室
const socket = io('ws://119.23.70.61:5000')

// 接受一上来欢迎
socket.on('welcome', (username: string) => {
  messageList.value.push({
    content: username,
    type: 'welcome',
  })
})

// 接受别的人消息
socket.on('other', (content: Message) => {
  messageList.value.push({
    ...content,
    type: 'other',
  })
})

// 发送用户名
const sendUsername = () => {
  socket.emit('username', username.value)
  isSend.value = true
}

// 给别人发送消息
const sendMsg = () => {
  if (!content.value) return

  const msg = {
    content: content.value,
    time: dayjs().format('HH:mm:ss'),
  }

  // 发送消息
  socket.emit('msg', msg)

  // 添加消息
  messageList.value.push({
    ...msg,
    type: 'my',
  })

  content.value = ''
}
</script>

<style scoped>
.chat-container {
  height: 300px;
  margin: 10px;
  border: 1px solid #000;
  padding: 10px;
  overflow-y: auto;
}

.welcome {
  text-align: center;
}

.welcome-text {
  background-color: #eff3f6;
  color: #62778c;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.my {
  text-align: right;
}
.my-title {
  font-size: 12px;
  color: #62778c;
  margin: 0 0 5px 0;
}
.my-content {
  display: inline-block;
  padding: 11px 8px;
  background-color: #1f8ce8;
  border-radius: 4px;
  color: #fff;
  margin: 0 0 5px 0;
}
.other {
  text-align: left;
}

.other .my-content {
  font-size: 14px;
  color: rgb(58, 60, 76);
  background-color: rgb(239, 243, 246);
}
</style>
